<template>
  <el-dialog
    @close="close"
    title="新增&编辑用户"
    :visible.sync="dialog"
    width="500px">
    <el-form ref="formInline" size="mini" :rules="rules" :model="formInline" label-width="100px">
      <el-form-item prop="username" label="账号">
        <el-input placeholder="账号" v-model="formInline.username" :disabled = disableAccount></el-input>
      </el-form-item>
       <el-form-item prop="password" label="密码">
        <el-input placeholder="密码" v-model="formInline.password" show-password></el-input>
      </el-form-item>
      <el-form-item prop="realName" label="姓名">
        <el-input placeholder="姓名" v-model="formInline.realName"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="手机号：">
        <el-input placeholder="手机号" v-model="formInline.phone"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱：">
        <el-input placeholder="手机号" v-model="formInline.email"></el-input>
      </el-form-item>
      <!--<el-form-item prop="role" label="角色：">
        <el-select v-model="formInline.role" placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.Id"
            :label="item.name"
            :value="item.Id">
          </el-option>
        </el-select>
      </el-form-item>-->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialog = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit()">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
 import { addUserApI,getDetailAPI ,updateUserApI } from '@/api/user'
 import { getRoleListAPI } from '@/api/role'
 import md5 from "js-md5";
export default {
  name: 'UserEdit',
  props: {
    dialog_: {
      default: false,
      type: Boolean
    },
      name: {
        type: String,
        default: null
      }
  },
  data() {
    return {
      dialog: true,
     /* roleList: [],*/
      btnLoading: false,  // 提交按钮状态
      disableAccount : false,
      formInline: {
        Id:'',
        username:'',
        realName:'',
        name:'',
        phone:'',
        role: '',
        operator:'admin'
      },
      roleList: [],
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
         phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' },
        ]
      }
    }
  },
  mounted() {
    debugger
    this.dialog = this.dialog_
    if (this.name) {
      //this.formInline = Object.assign({}, this.model)
      //this.getDetails();
      this.disableAccount = true
      //this.rules.password[0].required = false
    }else{

    }
    //获取角色列表
    /*getRoleListAPI().then(res => {
      debugger
      if (res.code === 0) {
        this.roleList = res.data.list
      } else {
        this.$message.error(res.message)
      }
    })*/
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('close')
    },
    // 根据角色ID查询角色详情
      getDetails() {
        let param = {
          name:this.name
        }
        getDetailAPI(param).then(res => {
          if (res.code === 0) {
            debugger
            this.formInline.Id = res.data[0].Id
            this.formInline.username = res.data[0].admin_name
            this.formInline.name = '';
            this.formInline.password = '';
            this.formInline.phone = res.data[0].mobile;
            this.formInline.role = res.data[0].role
          } else {
            this.$message.error(res.message)
          }
        })
      },
       /* getRoleList() {
         debugger
          this.loading = true
          let param = {
              name : '',
              page : 0,
              pagenum : 100
          }
          getRoleListAPI(param).then(res => {
            debugger
            this.loading = false
            if (res.code === 0) {
              this.roleList = res.data.list
            } else {
              this.$message.error(res.message)
            }
          })
        },*/
    // 提交信息
    onSubmit() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          if(this.formInline.Id == null || this.formInline.Id.length == 0 ){ // 增加
            debugger
              let formData = new FormData()
              this.btnLoading = true
              this.formInline.password = md5(this.formInline.password)
              let parm = Object.assign({}, this.formInline)
            addUserApI(parm).then(res => {
                debugger
                this.btnLoading = false
                if (res.code === 200) {
                  this.$message.success('操作成功')
                  // 操作完毕关闭弹窗
                  this.dialog = false
                  this.$emit('success')
                } else {
                  this.$message.error(res.msg)
                }
              })
          } else { // 编辑
              let formData = new FormData()
              this.btnLoading = true
              //this.formInline.password = md5(this.formInline.password)
              let parm = Object.assign({}, this.formInline)
              updateUserApI(parm).then(res => {
                debugger
                this.btnLoading = false
                if (res.code === 200) {
                  this.$message.success('操作成功')
                  // 操作完毕关闭弹窗
                  this.dialog = false
                  this.$emit('success')
                } else {
                  this.$message.error(res.message)
                }
              })
          }

        } else {
          this.$message.warning("请填写完整的信息")
        }
      })
    this.$emit('success')
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
</style>


